<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝网 - 淘！我喜欢</title>
    <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
    <link rel="stylesheet" href="index.css">
    <script src="jquery-3.4.1.min.js"></script>
</head>

<body>
    <div>
        <div class="header">
            <ul style="margin-left: 50px;">
                <li class="li_noraml">中国大陆 <img src="images/down.png" width="12" /></li>
                <!-- <li style="margin-left: 15px;font-size: 13px;cursor: pointer;"><img src="images/message.png"
                        width="12" /> 消息 <img src="images/down.png" width="12" /></li> -->
                <li style="color: #ff5401;font-size: 10px;margin-left: 15px;">亲，请登录</li>
                <li style="font-size: 10px;margin-left: 10px;color: #747474;">免费注册</li>
                <li style="margin-left: 15px;" class="li_noraml">手机逛淘宝</li>
            </ul>

            <ul class="right_ul">
                <li class="li_noraml my_tb" style="margin-left: 100px;">我的淘宝 <img src="images/down.png" width="12" />
                    <ul id="under" style="display: none">
                        <li>已买到的宝贝</li>
                        <li>我的足迹</li>
                    </ul>
                </li>
                <li class="li_noraml"><img src="images/cart.png" width="12" /> 购物车 <img src="images/down_red.png"
                        width="12" /></li>
                <li class="li_noraml"><img src="images/coll.png" width="12" /> 收藏夹 <img src="images/down.png"
                        width="12" /></li>
                <li class="li_noraml">商品分类</li>
                <li class="li_noraml">免费开店</li>
                <li class="li_noraml">|</li>
                <li class="li_noraml">千牛卖家中心 <img src="images/down.png" width="12" /></li>
                <li class="li_noraml">联系客服 <img src="images/down.png" width="12" /></li>
                <li class="li_noraml"><img src="images/daohang.png" width="12" /> 网站导航 <img src="images/down_red.png"
                        width="12" /></li>
            </ul>
        </div>

        <div class="main">
            <div class="main_top">
                <img src="images/index_logo.PNG" alt="" class="index_logo">
                <div class="main_top_center">
                    <div class="search_area">
                        <input type="text" class="search_input" placeholder="食用油非转基因">
                        <select name="search_type" id="search_type">
                            <option value="宝贝">宝贝</option>
                        </select>
                        <img src="images/search.png" alt="" class="search_icon">
                        <div class="search_right">
                            <img src="images/camera.png" alt="" class="camera_icon">
                            <button class="search_btn">搜索</button>
                        </div>
                    </div>
                    <div class="main_top_center_menu">
                        <ul>
                            <li>新款连衣裙</li>
                            <li>四件套</li>
                            <li>潮流T恤</li>
                            <li>时尚女鞋</li>
                            <li>短裤</li>
                            <li>半身裙</li>
                            <li>男士外套</li>
                            <li>墙纸</li>
                            <li>行车记录仪</li>
                            <li>新款男鞋</li>
                            <li>耳机</li>
                            <li>时尚女包</li>
                            <li>沙发</li>
                        </ul>
                    </div>
                </div>
                <div class="red_packet_area">
                    <p>去领红包</p>
                    <img src="images/red_packet.png" alt="" width="90%" height="70%" class="red_packet_code">
                </div>
            </div>
            <div class="main_content">
                <div class="main_content_title">
                    <span class="market_title">主题市场</span>
                    <div class="main_menu">
                        <ul>
                            <li style="font-weight: bold;color:#ff0745;">天猫</li>
                            <li style="font-weight: bold;color:#ff0745;">聚划算</li>
                            <li style="font-weight: bold;color:#35c905;">天猫超市</li>
                            <li>|</li>
                            <li>司法拍卖</li>
                            <li>飞猪旅行</li>
                            <li>天天特卖</li>
                            <li>淘小铺</li>
                            <li>|</li>
                            <li>造点新货</li>
                            <li>苏宁易购</li>
                            <li>淘宝心选</li>
                            <li>智能生活</li>
                        </ul>
                    </div>
                </div>
                <div class="main_left">
                    <div class="market_area">
                        <div class="market_item">
                            <span>女装 / 内衣 / 家居</span> <img src="images/right_arrow.png" alt="" class="right_icon">
                        </div>
                        <div class="market_item">
                            <span>女鞋 / 男鞋 / 箱包</span> <img src="images/right_arrow.png" alt="" class="right_icon">
                        </div>
                        <div class="market_item">
                            <span>母婴 / 童装 / 玩具</span> <img src="images/right_arrow.png" alt="" class="right_icon">
                        </div>
                        <div class="market_item">
                            <span>男装 / 运动户外</span> <img src="images/right_arrow.png" alt="" class="right_icon">
                        </div>
                        <div class="market_item">
                            <span>美妆 / 彩妆 / 个护</span> <img src="images/right_arrow.png" alt="" class="right_icon">
                        </div>
                        <div class="market_item">
                            <span>手机 / 数码 / 企业</span> <img src="images/right_arrow.png" alt="" class="right_icon">
                        </div>
                        <div class="market_item">
                            <span>大家电 / 生活电器</span> <img src="images/right_arrow.png" alt="" class="right_icon">
                        </div>
                        <div class="market_item">
                            <span>零食 / 生鲜 / 茶酒</span> <img src="images/right_arrow.png" alt="" class="right_icon">
                        </div>
                        <div class="market_item">
                            <span>厨具 / 收纳 / 清洁</span> <img src="images/right_arrow.png" alt="" class="right_icon">
                        </div>
                        <div class="market_item">
                            <span>家纺 / 家饰 / 鲜花</span> <img src="images/right_arrow.png" alt="" class="right_icon">
                        </div>
                        <div class="market_item">
                            <span>图书音像 / 文具</span> <img src="images/right_arrow.png" alt="" class="right_icon">
                        </div>
                        <div class="market_item">
                            <span>医药保健 / 进口</span> <img src="images/right_arrow.png" alt="" class="right_icon">
                        </div>
                        <div class="market_item">
                            <span>汽车 / 二手车 / 用品</span> <img src="images/right_arrow.png" alt="" class="right_icon">
                        </div>
                        <div class="market_item">
                            <span>房产 / 装修家具 / 建材</span> <img src="images/right_arrow.png" alt="" class="right_icon">
                        </div>
                        <div class="market_item">
                            <span>手表 / 眼镜 / 珠宝饰品</span> <img src="images/right_arrow.png" alt="" class="right_icon">
                        </div>
                    </div>
                </div>

                <div class="main_center">
                    <div class="main_pic_area">
                        <div class="looper_area">
                            <img src="images/swiper1/1.jpg" alt="" class="swiper_container" id="swiper1">
                            <img src="images/left_arrow_white.png" alt="" width="15" class="left_arrow arrow">
                            <img src="images/right_arrow_white.png" alt="" width="15" class="right_arrow arrow">
                        </div>
                        <div class="pic_top_right">
                            <img src="images/right_top.jpg" alt="" class="right_top">
                        </div>

                        <div class="tm_area">
                            <div class="tm_title">
                                <img src="images/tm_logo.png" alt="" width="80" height="20" style="float: left;">
                                <span
                                    style="font-size: 10px;color: #999999;float: left;margin-left: 20px;">理想生活上天猫</span>
                                <span class="swiper_count"><a class="current_pic_position">1</a>/5</span>
                            </div>

                            <div class="tm_looper_area">
                                <img src="images/swiper2/1-1.jpg" alt="">
                                <img src="images/swiper2/1-2.jpg" alt="" style=" margin-left: 1%;">
                            </div>
                        </div>

                        <div class="hot_sale_area">
                            <span style="color:#999999;">今日热卖</span>
                            <img src="images/right_bottom.jpg" alt="">
                        </div>
                    </div>

                </div>

                <div class="main_right">
                    <div class="user_area">
                        <div class="user_info_first">
                            <img src="images/default_user_avatar.jpg" alt="" class="user_avatar">
                            <p style="font-size: 10px;text-align: center;margin-top: -2px;">Hi！你好</p>
                            <div class="user_area_center">
                                <span class="center_item">领淘金币抵钱</span>
                                <span class="center_item">会员俱乐部</span>
                            </div>
                        </div>

                        <div class="user_area_btn">
                            <button>登录</button>
                            <button>注册</button>
                            <button>开店</button>
                        </div>
                        <div class="center_bac">
                        </div>
                        <div class="center_menu">
                            <ul>
                                <li style="border-bottom: 2px solid #ff5401;">公告</li>
                                <li>规则</li>
                                <li>安全</li>
                                <li>公益</li>
                                <li>千牛</li>
                            </ul>
                            <div class="user_menu_area">
                                <p style="float: left;margin-left: 30px;">关于加强卖家广告(含弹窗)合规宣传的公告</p>
                            </div>
                        </div>
                    </div>
                    <div class="right_menu">
                        <div class="menu_line">
                            <div class="menu_item">
                                <img src="images/1_icon.jpg" alt="" style="width: 50%">
                                <p>充话费</p>
                            </div>
                            <div class="menu_item" style="margin-top: -3px;">
                                <img src="images/3_icon.jpg" alt="" style="width: 50%;">
                                <p>旅行</p>
                            </div>
                            <div class="menu_item" style="margin-top: -6px;">
                                <img src="images/2_icon.jpg" alt="" style="width: 50%;">
                                <p>车险</span>
                            </div>
                            <div class="menu_item" style="margin-top: -4px;">
                                <img src="images/4_icon.jpg" alt="" style="width: 50%;">
                                <p>游戏</span>
                            </div>
                        </div>
                        <div class="menu_line">
                            <div class="menu_item">
                                <img src="images/c_icon.jpg" alt="" style="width: 50%">
                                <p>彩票</p>
                            </div>
                            <div class="menu_item">
                                <img src="images/d_icon.jpg" alt="" style="width: 50%;">
                                <p>电影</p>
                            </div>
                            <div class="menu_item" style="margin-top: -4px;">
                                <img src="images/j_icon.jpg" alt="" style="width: 50%;">
                                <p>酒店</p>
                            </div>
                            <div class="menu_item" style="margin-top: -4px;">
                                <img src="images/l_icon.jpg" alt="" style="width: 50%;">
                                <p>理财</p>
                            </div>
                        </div>
                    </div>
                    <div class="ali_app_area">
                        <div style="height: 15px;line-height: 15px;margin-top: 10px;">
                            <span
                                style="font-weight: bold;font-size: 10px;float: left;height: 15px;line-height: 15px;">阿里APP</span>
                            <span style="font-size: 8px;float: right;height: 15px;margin-right: 10px;">更多 <img
                                    src="images/right_arrow.png" alt=""
                                    style="float: right;width: 15px;height: 15px;line-height: 15px;"></span>
                        </div>
                        <div class="app_logo_area">
                            <div class="icon_container">
                                <img src="images/tb_icon.jpg" alt="" class="icon">
                            </div>
                            <div class="icon_container"><img src="images/tm_icon.jpg" alt="" class="icon"></div>
                            <div class="icon_container"><img src="images/zfb_icon.jpg" alt="" class="icon"></div>
                            <div class="icon_container"><img src="images/dd_icon.jpg" alt="" class="icon"></div>
                            <div class="icon_container"><img src="images/dp_icon.jpg" alt="" class="icon"></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <script type="text/javascript">
        $('.looper_area').mouseenter(function () {
            $('.arrow').css('display', 'inline')
        })

        $('.looper_area').mouseleave(function () {
            $('.arrow').css('display', 'none')
        })

        $('.left_arrow').click(function () {

        })

        $('.right_arrow').click(function () {

        })

        var currentIndex = 0;
        //设置变换时间为2s
        var timeChange = 2000;
        //定义数组
        var arr = new Array();
        arr[0] = "images/swiper1/1.jpg";
        arr[1] = "images/swiper1/2.jpg";
        arr[2] = "images/swiper1/3.jpg";
        arr[3] = "images/swiper1/4.jpg";
        arr[4] = "images/swiper1/5.jpg";
        //调用setInterval函数
        setInterval(ChangeImg, timeChange);
        function ChangeImg() {
            var image = document.getElementById('swiper1')
            if (currentIndex == arr.length - 1) {
                currentIndex = 0;
            } else {
                currentIndex += 1;
            }
            image.src = arr[currentIndex];
        }

        // 点击去领红包图片隐藏该图片
        $('.red_packet_area').click(function() {
            $(this).css('display','none')
        })


        // 移入菜单显示下拉
        $('.my_tb').mouseenter(function() {
            $('#under').css('display','inline')
        })

        $('.my_tb').mouseleave(function() {
            $('#under').css('display','none')
        })
    </script>
</body>

</html>